<template>
	<view v-show="value" class="qh-loading" :class="{'flex-cn-cn mar_t_20': row, 'flex-col-cn-cn': !row}">
		<view class="qh-loading__icon-box flex-cn-cn" :style="circleStyle">
			<view class="qh-loading__icon-border" :style="borderStyle"></view>
		</view>
		<text class="qh-loading__text" v-if="text !== ''" :style="colorStyle">{{text}}</text>
	</view>
</template>

<script>
	export default {
		name: "qh-loading",
		props: {
			value: Boolean,
			text: {
				type: String,
				default: ''
			},
			size: {
				type: [String, Number],
				default: ''
			}, //尺寸 small 50 50rpx
			row: {
				type: Boolean,
				default: false
			},
			color: {
				type: String,
				default: '',
			},
		},
		computed: {
			circleStyle() {
				if (this.size == 'small') {
					return 'width:28rpx;height:28rpx;';
				}
				if (this.size) {
					let css = {
						width: this.$getUnitSize(this.size),
						height: this.$getUnitSize(this.size),
					};
					return this.$joinStyle(css);
				}
				return '';
			},
			borderStyle(){
				return this.color ? `border-color:${this.color};border-top-color: transparent` : '';
			},
			colorStyle() {
				return this.color ? `color:${this.color}` : '';
			},
		},
	}
</script>

<style lang="scss">
	.qh-loading {
		width: 100%;
		transition-duration: 300ms;
		transition-timing-function: ease-out;

		.qh-loading__icon-box {
			width: 50rpx;
			height: 50rpx;
			position: relative;

			.qh-loading__icon-border {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 50%;
				border: 2rpx solid var(--primary-color);
				border-top-color: transparent;
				box-sizing: border-box;
				animation: rotate-border 0.8s linear infinite;
			}

			@keyframes rotate-border {
				100% {
					transform: rotate(360deg);
				}

				80% {
					transform: rotate(260deg);
				}

				60% {
					transform: rotate(160deg);
				}

				40% {
					transform: rotate(80deg);
				}

				20% {
					transform: rotate(40deg);
				}

				0% {
					transform: rotate(0deg);
				}
			}
		}

		.qh-loading__text {
			font-size: 28rpx;
			color: var(--primary-color);
			line-height: 36rpx;
			text-align: center;
			max-width: 300rpx;
		}

		&.flex-cn-cn>.qh-loading__text {
			margin-left: 16rpx;
		}

		&.flex-col-cn-cn>.qh-loading__text {
			margin-top: 16rpx;
		}
	}
</style>
